<template>
  <div v-if="visible" class="video-modal">
    <div class="video-modal__mask" @click="onClose"></div>
    <div class="video-modal__content">
      <video
        id="video"
        src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
        initial-time="0"
        :controls="true"
        :autoplay="false"
        :loop="false"
        :muted="false"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "vodeo-modal",
});

const visible = defineModel({ type: Boolean, default: false });

const onClose = () => {
  visible.value = false;
};
</script>

<style lang="less">
.video-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  &__mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
  }
  &__content {
    position: relative;
    z-index: 1001;
    // background: #fff;
    border-radius: 12px;
    padding: 20px;
    width: 90vw;
    max-width: 400px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
</style>
